<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input v-model="name" type="text" />
    </div>
    <div>
      <span>年龄:</span>
      <input v-model="age" type="number" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="gender" >
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="add" >添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in arr" :key="item.id">
          <td> {{item.id}} </td>
          <td> {{item.name}} </td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
          <td>
            <button @click="del(index)" >删除</button>
            <button @click="edit(index)" >编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr:[ {id:1, name:"张三",age:20,gender:"男"} ,{id:2, name:"赵四",age:10,gender:"男"},{id:3, name:"王五",age:23,gender:"女"}],
      name:'',
      age:'',
      gender:'男',
      id:''
    }
  },
  methods: {
    add(){
      // 非空校验
      if(this.name==''||this.age==''||this.gender=='') return alert('信息不能为空')
      // 修改
      if(this.id != ''){
        let num = this.arr.findIndex(item=> item.id == this.id)
      this.arr[num].name = this.name
      this.arr[num].age = this.age
      this.arr[num].gender = this.gender
       this.name = ''
      this.age = ''
      this.gender =  '男'
      this.id = ''
      return 
      }
      // 添加
      let id = this.arr.length==0? 1:this.arr[this.arr.length-1].id+1
      this.arr.push({id, name:this.name,age:this.age,gender:this.gender})
       this.name = ''
      this.age = ''
      this.gender =  '男'
      this.id = ''
    },
    del(index){
      this.arr.splice(index,1)
    },
    edit(index){
      this.name = this.arr[index].name
      this.age = this.arr[index].age
      this.gender = this.arr[index].gender
      this.id = this.arr[index].id
    }
  }
}
</script>

<style lang="css" scoped>
table,
table th,
table td {
  border: 3px solid #000;
}
</style>